import {Component} from 'react';

export default class CommentForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            'author':'',
            'text':''
        };
    }
    handleAuthorChange(e){
        this.setState({author: e.target.value});
    }
    handleTextChange(e){
        this.setState({text: e.target.value});
    }
    handleSubmit(e) {
        e.preventDefault();
        var author = this.state.author.trim();
        var text = this.state.text.trim();
        if (!text || !author) {
          return;
        }
        // TODO: send request to the server
        this.props.onCommentSubmit({author: author, text: text});
        this.setState({author: '', text: ''});
      }

    render(){
        return (
            <div className="commentForm">
            <form className="commentForm" onSubmit={this.handleSubmit.bind(this)}>
                <input type="text" value={this.state.author} onChange={this.handleAuthorChange.bind(this)} placeholder="Your name" />
                <input type="text" value={this.state.text} onChange={this.handleTextChange.bind(this)} placeholder="Say something..." />
                <input type="submit" value="Post" />
              </form>
          </div>
        );
    }
}